<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/index/home' }"
        >首页</el-breadcrumb-item
      >
      <el-breadcrumb-item>文章管理</el-breadcrumb-item>
      <el-breadcrumb-item>文章列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片组件 -->
    <el-card class="box-card">
      <!-- 表格组件 -->
      <el-table :data="tableData" border style="width: 100%">
        <!-- 
              label: 表头的标题
              width: 列表宽度
              prop: 指的是数组中对象中的属性名
           -->
        <el-table-column label="序号" width="80">
          <template v-slot="{ $index }">
            {{ $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" width="600">
        </el-table-column>
        <el-table-column prop="type" label="类型" width="100">
          <template v-slot="{ row }">
            {{ row.type == 1 ? "文章" : "视频" }}
          </template>
        </el-table-column>
        <el-table-column prop="user.nickname" label="作者" width="180">
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template v-slot="{ row }">
            <el-button @click="goAddArticle(row.id)">编辑</el-button>
            <el-button type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <!-- 
        分页器
        layout： 布局，表示分页器需要显示哪些内容
              total: 表示显示总数量
              sizes: 显示的下拉框（切换每页显示多少条数据）
              prev: 显示上一页按钮（左箭头）
              next: 显示下一页按钮（右箭头）
              pager：显示页数
              jumper：显示文本框，可以输入数字，直接跳到你输入的数字那一页
        total：列表总数量
        page-size：每页显示条目个数
        page-sizes：每页显示个数选择器的选项设置
        current-page：当前页数
        size-change：pageSize 改变时会触发
        current-change：currentPage 改变时会触发（页数改变的时候触发）
         -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>


<script>
import { articleList } from "@/api/article";

export default {
  data() {
    return {
      tableData: [], //文章列表
      currentPage4: 1,
      pageIndex: 1, //请求的页数
      pageSize: 5, //每页请求多少数据
      total: 0, //文章总数量
    };
  },
  created() {
    //   total数量
    // 如何获取到文章的总数量 ？直接请求1万条数据回来，请求回来的数组中总长度即可文章的总数量。
    articleList({
      pageIndex: 1,
      pageSize: 10000,
    }).then((res) => {
      this.total = res.data.data.length;
    });
    //请求文章列表
    articleList({
      pageIndex: this.pageIndex,
      pageSize: this.pageSize,
    }).then((res) => {
      console.log(res);
      this.tableData = res.data.data;
    });
  },
  methods: {
    //点击标记跳转到文章添加页面
    goAddArticle(id) {
      this.$router.push({
        path: "/index/addArticle",
        query: {
          id: id,
        },
      });
    },

    handleSizeChange() {},
    handleCurrentChange() {},

    //获取文章列表
    getData() {
      articleList({
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
      }).then((res) => {
        // console.log(res);
        this.tableData = res.data.data;
      });
    },

    //pageSize改变时会触发
    handleSizeChange(num) {
      this.pageSize = num;
      this.getData();
    },

    // current-page改变时会触发（页数改变的时候触发）
    handleCurrentChange(curpage) {
      this.pageIndex = curpage;
      this.getData();
    },
  },
};
</script>


<style lang="less" scoped>
.el-card {
  margin-top: 20px;
}
</style>